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1. Introduction 


Angular can be understood as an open source framework used for front end web development. It is a Typescript based 
framework. Front end web development means Angular can be used to develop front end of the websites. Saying that 
Angular is Typescript based, tells that Typescript is the primary language used in Angular. Typescript is a superset of 
JavaScript which means that any valid JavaScript code is also valid Typescript code. Since the browsers used currently do 
not recognize the Typescript, therefore at the time of compilation, typescript is transpiled or converted to plain old 
JavaScript. Typescript is used since it offers many more features as compared to regular JavaScript. It not only supports 
class based object oriented programming features but also static typing. This means that unlike regular JavaScript, 
Typescript permits the developers to use the features of object-oriented programming in Angular projects. The errors and 
bugs can be detected and corrected during the development time. Angular is also known to be an opinionated framework, 
which signifies that it imposes a specific criterion for project development. The developers who work with Angular are 
required to follow a specific style for organizing their projects. The first version of Angular called AngularJS or Angular 1.X. 
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came into existence as a JavaScript based front end development framework, in order to overcome the challenges in the 


development of single page webapplication. 


2. Technology Used 


There are various technologies used as mentioned below: Angular 9, Firebase, Bootstrap, firebase firestore, firebase auth 


Firebase. 
2.1. Firebase 


Firebase can be defined as a backend platform for developing not only web applications but also ios and android 
applications. It provides a real time database experience, offers different application program interfaces or APIs, supports 
multiple types of hosting and authentication platforms. All firebase users receive live updates after every alteration just 
like a real time database [7]. For the authentication purpose, users can apply anonymous passwords or other social 
authentications can also be used. The hosting involves the deployment of the applications over a secure connection to the 


Firebase servers. The limitation of Firebase is that it can support 50 connections and 100MB storage. 


2.2. Firestore 


Firestore is a more flexible and scalable no SQL database. It can be used for storing and syncing the data for client as well 
as server side development. Just like the Firebase, Firestore provides a real time database experience by syncing the data 
through the real time listeners to the client app. Not only this, it also has a provision for offline support for both web and 
mobile in order to enable the developers to build responsive applications irrespective of the network availability. 


3. Software Required 
3.1. NodeJS 


NodeJS is a JavaScript based run-time environment which is needed by the Angular Command line interface or CLI to 
execute. Just time java virtual machine is needed for java applications to work, nodeJS is required for the Angular 
command line to run. It is a server-side platform which is built on JavaScript Engine (version 8) of Google chrome. It is a 
cross platform open source runtime environment which is used for building networking and server side applications. It can 


be executed within Node.js runtime on various operating systems like Microsoft Windows, Macintosh, Linux etc. 


3.2. Visual Studio 


Visual Studio Code is a light weight and a well-built integrated development environment. It runs on the desktop and 
works with Windows, Linux and macOS. Visual Studio Code supports JavaScript, Typescript as well as Node.js. This source 
code editor is enriched with not only an ecosystem of many extensions for various languages like PHP, C++, Go, Java, 
Python and C# but also many runtimes such as Unity and .NET. VS code assists the developers with its instant syntax 
highlighting, auto indentation, bracket matching, box selection, snippets and much more. 


3.3. Angular CLI 


Angular command line interface makes the beginning of an Angular project quite easy. Angular CLI consists of commands 
that help the developers to develop and begin on their project in no time. The installation should be done globally else it 
will get downloaded in the current directory. Usage of Angular CLI for developing Angular applications is recommended 
since it saves the time as installation and configuration of all needed dependencies and wiring everything up is not 
required in case of CLI. 
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4. Libraries Used 


4.1. Font Awesome 


Font Awesome icons can be placed just anywhere by simply using a style prefix and the name of the icon. The icons of 
Font Awesome are made in such a way that they adopt the properties and naturally appear alongside the text. These icons 
are made to be used with the inline HTML elements like, or. The libraries present in font awesome come with 
approximately 519 free vector icons which are scalable too. These icons are easily customized and can be used for 
commercial as well as personal purposes. 


4.2. Bootstrap 


Bootstrap is a well built, instinctive and a strongly powered front end framework. It makes web development easier by 
simply using HTML, CSS and JavaScript. The responsive CSS of Bootstrap fits to all screen sizes from desktops to mobile. 
Bootstrap has some properties of global CSS, basic HTML elements upgraded with the use of extensible classes and an 
improved grid sys- tem. It consists of many components which are reusable in order to provide drop-downs, alters, pop 
overs, icons and much more. Bootstrap comes with various customized jQuery plugins which can easily be included and 
used. 


4.3. jQuery 


jQuery is a cross platform, enriched with features, small but fast JavaScript based library. It was built for the simplification 
of HTML client-side scripting. jQuery makes animation, event handling, document traversal very easy and simple to use on 
various types of web browsers. 10 The most vital functionality of jQuery is to make the usage of JavaScript easy, so that 
the web- sites are made more attractive as well as interactive without much difficulty. It works on the principle of “Write 
less, do more” because a lot of common tasks which consume many JavaScript code lines are taken up by the jQuery 


which binds those lines of code into functions which can be invoked whenever needed by just a single line of code. 


4.4, Pixabay 


Pixabay is an international, free to use website used for sharing pictures, vector images, illustrations, video clips as well as 
audio clips. Currently Pixabay offers approximately 1188454 photos, vector graphic images, videos and audio clips free of 
cost. All the image and video files available on the website can be utilized for both personal and commercial purposes 


with- out any attribution requirement [5]. 


5. About the project 


Angular can be understood as an open source framework used for front end web development. It is a Typescript based 
framework. Front end web development means Angular can be used to develop front end of the websites. Saying that 
Angular is Typescript based, tells that Typescript is the primary language used in Angular. Typescript is a superset of 
JavaScript which means that any valid JavaScript code is also valid Typescript code. Since the browsers used currently do 
not recognize the Typescript, therefore at the time of compilation, typescript is transpiled or converted to plain old 
JavaScript. Typescript is used since it offers many more features as compared to regular JavaScript. It not only supports 
class-based object-oriented programming features but also static typing. 

Most portion of the development using Angular involves the usage of components. Components can be understood as 
the classes which interact with the HTML files which finally get displayed on the web browser. The structure of file consists 
of application component which has the following files. There are 9 components which together constitute this project. 
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e app-root.component 

e home.component 

e —_login.component 

e myblogs.component 

e menu.component 

e post.component 

e —_ profile.component 

e comments.component 
These files get created automatically when the project is made using the Angular command line interface. The whole 
Angular application is developed using various components. The main idea behind Angular using the components to build 
an application is to reduce the complicated application to a number of parts which can be reused when required. 


5.1. menu.component 


Menu component is responsible for generating the navigation bar of this website. It uses standard bootstrap navigation 
with some custom CSS styling to achieve so. menu component once loaded, stays there throughout the life cycle of this 
website. Property Binding While developing Angular applications, developers come across a couple of methods for 
displaying data on the view. First is property binding and the other is interpolation. 

They are used to transfer data from component to template. Property binding can be defined as a one-way technique 
that allows to set the attribute of the view element. Property binding involves updating the property value present in 
component and then bind it with an element present in the view tem- plate. Attributes which are bound to an element are 
always placed within square brackets [6]. 


5.2. app.root 


app-root component serves as a container for entire application, in other words it is parent component of all other 
components. All the fonts and other styling resources are loaded by app-root component so that they are accessible 
throughout the application. The other important aspect of app-root component is to load navigation panel, and to load 
other components via router module as and when requested by user. This configuration ensures that menu component 


stays on top and the rest of the components are dynamically loaded via the router module [7]. 


5.3. home.component 


This is the first component or the landing component which is displayed to user as he or she visits it. It follows the design 
concept of Facebook to merge sign up page into the landing page. This page offers user to sign up and to navigate to any 
other page if already logged in, displays some information describing the purpose of this website and the contact details 
at the bottom. The sign up is carried out using Firebase auth module, and the data validation is handled by custom angular 


validators like myguard.guard . Lastly, it uses Reactive Forms Module to handle forms. 
5.4. login.component 


Again, the login component follows the same design approach and offers a very clean experience. It uses a custom service 
(auth.service) which uses firebase auth module to handle the login process of user. This service is responsible make basic 
user information (like uid, displayName) accessible to all other components in this project. The concept used is Angular’s 
interpolation which is required to display the property of the component in the view template along with the double curly 


braces. All kinds of properties can be displayed in the view for example number, string, array, date, map or list. The 
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attribute name which is to be displayed in the view template should be present between double curly braces also called as 
moustache syn- tax. Angular by default extracts from the component the value of propertyName as well as 
object.propertyName and puts those extracted values in the web browser. Angular keeps on updating the display when 


the properties change. Data binding in angular is of two types, one way and two way. 
5.5. profile.component 


Profile component is responsible for displaying profiles of users along with ability to modify or update it. It also allows 
users to change profile picture and change password of their account. The profile component uses a different approach 
for dis- playing information. Instead of displaying it in some sort of div or tabular format and providing a edit button for 
each value, it just assigns the stored value to each respective filed. So, the user can edit whichever field he wants and hit 


submit and the information will be updated. 


5.6. myblogs.component 


The myblogs component serves quite a few purposes: 

e — It allows user to create new blog 

* — It allows user to view his/her blogs 

* — It allows user to delete his/her existing blog 

This component has mainly two sections, one to create Blog and the other one containing existing blogs of current 

user. The blogs are displayed only with title and first 30 characters, selecting it open that particular blog in a new 
component called view component. The Create Blog is hidden by default using ng directives and is displayed when the user 
click create post button. This is done to save space on this page, and again, making it look clean. The blogs are stored in 
firebase firestore database. Each blog is liked to its owner with uid which allows granting permissions to modify and delete 


it. The formatting is done using html directives [10]. 


5.7. views.component 


view component is responsible to display the blog and the comments associated with it. view component is designed to 
dis- play blog to anyone, irrespective of whether he has logged in or not. view component also provides option to 
comment on the blog, though for commenting, one must be logged in. Again, Firebase firestore database is used to store 


comments and are retrieved and rendered using comments component. 


5.8. comments.component 


Comments component is responsible to retrieve comments for respective blog and render it. This component pulls all the 
comments from firestore database, render it and then is applied by view component. Data binding is a very essential and 
vital aspect of the software development process. Data binding involves the communication between the component and 
its corresponding view. Data binding permits for interactivity as well as dynamism in the applications. Two way data 
binding is a technique which involves data flow in both ways from component to view and from view to component. The 
components and the view are always synchronized, which means that the alterations made on one end are immediately 
reflected on the other side. Two-way binding is generally used while dealing with forms which involves input given by user 


to update the state of the component and vice versa [9]. 
5.9. app routing module 


After building all those components, we need to somehow relate them to enable navigation between them. Some of 
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these events driven navigation is directly controlled in respective typescript files while the static ones are handled using 
routing module. For e.g.: A invalid path results in 404 error, this is handled by redirecting any such requests to home 
component. 


5.10. auth.service 


This is a custom service designed to handle authentication with firebase auth, thereby simplifying this process and 
reducing repetition of code. Making a custom service enables us to change authentication method in future, without 


struggling too much as now all the authentication code is at one place and not scattered among several files. 
5.11. myguard.guard 


This is a custom guard designed to validate email address, password etc before it is pushed to database. Similar to auth 
ser- vice, we define it as a guard to reduce repeating of code and gives us flexibility to 20 tune these criteria with a lot 
more ease. This guard is used in login, signup and profile component to validate the information given by the user. Guards 


are implemented to impose constraint’s on information provided by user, such as password, email id, name etc. 


6. Conclusion 


The evolution occurring in the technology sector, it has become necessary for all of us to become used to these new 
advancements if we want to get groomed up and do not want to get stale or neglected in the market. These new 
technologies also assist us in obtaining more users, increasing the user involvement, and will also help in making better 
revolutions and conversions. Some of these technologies and advancements have already been implemented while others 
are looking forward to being implemented in near future. Angular’s revolutionary perspective for widening HTML will 
make very much sense to those who are web developers in soul. With Google behind it and the support of a big 
community, Angular is here to stay and grow. Angular works quite well with both large scale productions as well as quick 
prototyping projects. 
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